<template>
  <div class="database_wrap">
    <div class="left">
      <div class="itemLeft">
        <div class="itemLefthead">算法分类</div>
        <div class="itemList">
          <el-collapse class="collLists" v-model="activeNames">
            <el-collapse-item
              title="水声信号谱分析和谱特征提取"
              @click.native="setSuanfaType(8)"
            >
              <!-- <div
                :class="['listitem', { act: currCate === item.typeId }]"
                v-for="item in leftZaosheng"
                :key="item.typeId"
                @click.stop="setSuanfaType(item.typeId)"
              >
                {{ item.name }}
              </div> -->
            </el-collapse-item>
            <el-collapse-item
              title="水声信号处理"
              @click.native="setSuanfaType(9)"
            >
              <!-- <div
                :class="['listitem', { act: currCate === item.typeId }]"
                v-for="item in leftShuisheng"
                :key="item.typeId"
                @click.stop="setSuanfaType(item.typeId)"
              >
                {{ item.name }}
              </div> -->
            </el-collapse-item>
          </el-collapse>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="itemLefthead">
        检测算法
        <el-button class="btn calcImport" @click="imoprt(1)" v-if="currCate"
          >算法导入
        </el-button>
      </div>
      <div class="itemList">
        <div class="searchBox">
          <el-input
            class="bin_input"
            v-model="searchKey"
            placeholder="请输入内容"
            style="width: 60%"
            clearable
            @keyup.enter.native="searchfn"
          >
            <template slot="append">
              <el-button class="btn search" @click="searchfn"> 查询 </el-button>
            </template>
          </el-input>
        </div>
        <div class="tableBox" ref="tableBox">
          <el-table
            :border="true"
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            :height="tableH"
            class="bin_table"
          >
            <el-table-column
              min-width="170"
              resizable
              label="算法名称"
              sortable
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span @click="clickRow(scope.row)" style="cursor: pointer">
                  {{ scope.row.algorithmName }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              min-width="170"
              resizable
              label="版本号"
              sortable
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span @click="versionClick(scope.row)" style="cursor: pointer">
                  {{ scope.row.algorithmVersion }}
                </span>
              </template>
            </el-table-column>
            <el-table-column
              resizable
              prop="name"
              label="算法说明文档"
              width="140"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <img
                  class="docImg"
                  @click="docClick(scope.row)"
                  :src="require('../../../assets/word3.png')"
                  alt=""
                />
              </template>
            </el-table-column>
            <!-- <el-table-column
              min-width="100"
              resizable
              prop="status"
              label="状态"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                {{ scope.row.status === 1 ? "上架" : "下架" }}
              </template>
            </el-table-column> -->
            <el-table-column
              min-width="170"
              resizable
              prop="uploadUser"
              label="上传人"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              resizable
              prop="createTime"
              label="上传时间"
              sortable
              width="190"
              show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
              resizable
              prop="updateTime"
              label="修改时间"
              sortable
              width="190"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column
              resizable
              label="操作"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <img
                  class="actBtn"
                  :src="require('@/assets/edit.png')"
                  alt=""
                  @click="imoprt(2, scope.row)"
                />
                <!-- <img class="actBtn" :src="require('../../../assets/record.png')" @click="record(scope.row)" alt="" /> -->
                <img
                  class="actBtn"
                  :src="require('@/assets/del.png')"
                  @click="delete1(scope.row)"
                  alt=""
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pageBox" v-if="tableData.length">
          <!-- <div class="pageInfo">
            <span class="size">{{ pageSize }}</span>
            条每页，共{{ total }}条
          </div> -->
          <!-- <el-pagination
            @size-change="sizeChange"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            :page-size="10"
            layout="total, sizes "
            :total="total"
          /> -->
          <el-pagination
            class="bin_fenyeqi"
            :current-page.sync="query.pageNum"
            :page-sizes="[10, 20, 30, 40, 50, 100]"
            prev-text="上一页"
            next-text="下一页"
            popper-class="bin_fenyeqi_popper"
            layout="total, sizes,->,prev, pager, next"
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="操作记录"
      :visible.sync="recordDialogShow"
      width="800px"
    >
      <el-table
        :border="true"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        height="300"
        class="bin_table"
      >
        <el-table-column
          min-width="170"
          resizable
          label="操作人"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.date }}
          </template>
        </el-table-column>
        <el-table-column
          min-width="190"
          resizable
          prop="name"
          label="操作时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="190"
          resizable
          prop="name"
          label="操作记录"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            {{ scope.row.date }}
          </template>
        </el-table-column>
      </el-table>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="recordDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small"> 确认 </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog dialog-1000"
      title="删除"
      :visible.sync="delDialogShow"
      width="800px"
    >
      <div style="color: #fff; font-size: 18px">确认删除本条数据吗？</div>
      <div class="edit_btns">
        <el-button
          class="bin_button"
          size="small"
          @click="delDialogShow = false"
        >
          取消
        </el-button>
        <el-button class="bin_button" size="small" @click="delelelel">
          确认
        </el-button>
      </div>
    </el-dialog>
    <el-dialog
      v-zsdialogDrag
      :closeOnClickModal="false"
      class="bin_dialog algorithm_dialog dialog-800"
      title="算法导入"
      :visible.sync="algorithmDialogShow"
      width="800px"
      top="10vh"
    >
      <algorithm-form
        ref="algorithmForm"
        :type="currCate"
        :clickType="clickType"
        :formObject="formObject"
        @close="algorithmDialogShow = false"
      ></algorithm-form>
    </el-dialog>
  </div>
</template>
<script>
import algorithmForm from "./algorithmForm.vue";
import http from "@/utils/request";
export default {
  name: "algorithm",
  components: { algorithmForm },
  data() {
    return {
      activeNames: "1",
      currDelRow: {},
      currCate: null,
      currPage: 1,
      pageSize: 10,
      total: 0,
      searchKey: "",
      recordDialogShow: false,
      delDialogShow: false,
      algorithmDialogShow: false,
      leftZaosheng: [],
      leftShuisheng: [],
      tableData: [],
      tableH: 0,
      query: {
        pageNum: 1,
        pageSize: 10,
        searchContent: "",
        algorithmType: "",
      },
      formObject: {},
      clickType: null,
    };
  },
  created() {
    this.getSuanTree();
    this.setSuanfaType(8);
  },
  mounted() {
    this.fetTableHeight();
  },
  methods: {
    handleSizeChange(val) {
      this.query.pageNum = 1;
      this.query.pageSize = val;
      this.getTable();
    },
    handleCurrentChange(val) {
      this.query.pageNum = val;
      this.getTable();
    },
    clickRow(item) {
      let tabItem = {
        algorithmId: item.id,
        tabName: this.getTagName(item.functionName),
        algorithmType: item.algorithmType,
        functionName: item.functionName,
      };
      // console.log("当前行tabItem==", tabItem);

      this.$store.commit("SETCURRTABITEM", tabItem);

      this.$router.push({
        path: "/analysisTool/analysis",
      });
    },
    // 获取算法标签上显示的算法名称
    getTagName(functionName) {
      // lofar=LOFAR、demon=DEMON、detection=信号检测、distinguish=信号识别、estimate=参数估计
      let name = "";
      if (functionName == "lofar") {
        name = "LOFAR";
      } else if (functionName == "demon") {
        name = "DEMON";
      } else if (functionName == "detection") {
        name = "信号检测";
      } else if (functionName == "distinguish") {
        name = "信号识别";
      } else if (functionName == "estimate") {
        name = "参数估计";
      }
      return name;
    },
    getSuanTree() {
      this.$api.algorithmTypeTree().then((res) => {
        if (res.code == 200) {
          this.leftZaosheng = res.result["水声信号谱分析和谱特征提取"];
          // console.log("this.leftZaosheng=", this.leftZaosheng);

          this.leftShuisheng = res.result["水声信号处理"];
        }
      });
    },
    versionClick(row) {
      this.$api
        .getAlgorithmVersionInfo({ algorithmName: row.algorithmName })
        .then((res) => {
          if (res.code == 200) {
            this.leftZaosheng = res.result["水声信号谱分析和谱特征提取"];
            this.leftShuisheng = res.result["水声信号处理"];
          }
        });
    },
    sizeChange() {},
    delelelel() {
      this.$api.delAlgorithm(this.currDelRow.id).then((res) => {
        this.$message({
          message: "删除成功",
          type: "success",
        });
        this.delDialogShow = false;
        this.getTable();
      });
    },
    docClick(row) {
      console.log(row, "row");
      let query = { algorithmId: row.id, fileType: "1" };

      http({
        method: "post",
        url: `/underwater-sound/algorithmManagement/downloadFile?algorithmId=${row.id}&fileType=1`,
        responseType: "blob", // 设置为blob以接收文件
        // data: query,
      })
        .then((response) => {
          let filePath = row.explanatoryDocumentFilePath;
          // 使用Windows风格的路径分隔符来分割字符串
          let fileNameWithExt = filePath.split("\\").pop(); // 'pop()' 方法返回数组的最后一个元素

          // 如果后端没有通过 Content-Disposition 提供文件名，则使用默认名
          if (!fileNameWithExt) {
            fileNameWithExt = "downloaded_file.txt"; // 或其他默认文件名
          }

          // 创建一个指向 Blob 的 URL
          const url = window.URL.createObjectURL(response);

          // 创建一个 a 标签并设置其 href 和 download 属性
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", `${fileNameWithExt}`);

          // 将 a 标签添加到 body 中并触发点击事件
          document.body.appendChild(link);
          link.click();

          // 清理：从 DOM 中移除 a 标签并释放 URL 对象
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        })
        .catch((error) => {
          // 处理请求错误
          console.error("下载文件时出错:", error);
          // 可以在这里添加更多的错误处理逻辑，比如显示错误消息给用户
        });
    },
    setSuanfaType(val) {
      if (this.currCate !== val) {
        this.currCate = val;
        this.getTable();
      }
    },
    getTable() {
      this.query.searchContent = this.searchKey;
      this.query.algorithmType = this.currCate;
      this.$api.dataAlgorithmsProcessing(this.query).then((res) => {
        if (res.code === 200) {
          this.tableData = res.result.result.list;
          this.total = res.result.result.total;
        }
      });
    },
    imoprt(index, row) {
      this.algorithmDialogShow = true;
      if (index == 2) {
        // 如果是点击列表里边的操作  则需要数据回显
        this.formObject = row;
      }
      this.clickType = index;
    },
    record(row) {
      this.$api
        .getAlgorithmVersionInfo({ algorithmName: row.name })
        .then((res) => {
          console.log(res);
          this.recordDialogShow = true;
          // if (res.code === 200) {
          //   this.tableData = res.result.content;
          //   this.total = res.result.totalSize;
          // }
        });
    },
    delete1(row) {
      this.currDelRow = row;
      this.delDialogShow = true;
    },
    resetHeight() {
      return new Promise((resolve, reject) => {
        this.tableH = 0;
        resolve();
      });
    },
    fetTableHeight() {
      this.resetHeight().then((res) => {
        // console.log("tableBox", this.$refs.tableBox);
        this.tableH = this.$refs.tableBox.getBoundingClientRect().height - 10;
      });
    },
    searchfn() {
      this.query.pageNum = 1;
      this.getTable();
    },
    exprotModelFn() {},
  },
};
</script>
<style lang="scss" scoped>
.edit_btns {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 50px;
}

.database_wrap {
  width: 100%;
  height: 100%;
  --left-width: 20%;
  --head-title: 50px;

  .itemLefthead {
    width: 100%;
    display: flex;
    height: var(--head-title);
    background: rgba(2, 255, 244, 0.15);
    border-radius: 0px 0px 0px 0px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 20px;
    color: #ffffff;
    line-height: 59px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    text-indent: 31px;
    position: relative;
    align-items: center;
    justify-content: space-between;

    &::before {
      width: 5px;
      height: 20px;
      background: #02fff4;
      border-radius: 0px 0px 0px 0px;
      position: absolute;
      left: 20px;
      top: 16px;
      content: "";
    }

    .addBtn {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/addjia.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }

    .calcImport {
      text-indent: 24px;
      margin-right: 20px;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/expot.png") center center no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 10px;
        content: "";
      }
    }
  }

  .left {
    height: 100%;
    width: 20%;
    float: left;

    .itemLeft {
      width: 100%;
      height: 100%;
      background: rgba(2, 82, 107, 0.6);
      border: 1px solid #02fff4;

      .itemList {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
        height: calc(100% - 50px);
        overflow: scroll;

        ::v-deep .collLists {
          border: none;

          .el-collapse-item__content {
            padding: 0;
          }

          .el-collapse-item__arrow {
            display: none;
          }

          .el-collapse-item__header {
            padding-left: 16px;
            font-weight: 400;
            font-size: 18px;
            background: rgba(2, 255, 244, 0.1);
            color: #a2fffb;
            border: 1px solid #02fff4;
            margin-bottom: 10px;
            box-shadow: inset 0px 0px 25px 1px #02fff4;
            border-radius: 5px;
          }

          .el-collapse-item__wrap {
            background-color: transparent;
            border-bottom: none;

            .listitem {
              width: 100%;
              box-sizing: border-box;
              cursor: pointer;
              color: #fff;
              padding: 0 16px;
              background-color: #031722;
              margin-bottom: 10px;
              box-sizing: border-box;
              height: 40px;
              line-height: 40px;
              border: 1px solid transparent;

              &.act {
                border: 1px solid #02fff4;
              }
            }
          }
        }

        .listitem {
          width: 100%;
          box-sizing: border-box;
          cursor: pointer;
          border-radius: 3px;
          color: #fff;
          padding: 16px;
          margin-bottom: 10px;
          box-shadow: inset 0px 0px 15px 1px rgba(2, 255, 244, 0.5);

          &.act {
            box-shadow: inset 0px 0px 15px 1px #02fff4;
          }
        }
      }
    }
  }

  .right {
    height: 100%;
    width: calc(100% - var(--left-width) - 20px);
    float: right;
    background: rgba(2, 82, 107, 0.6);
    border: 1px solid #02fff4;

    .itemList {
      width: 100%;
      height: calc(100% - var(--head-title));
      padding: 20px;
      box-sizing: border-box;

      .searchBox {
        width: 100%;
        height: 40px;
        margin-bottom: 10px;

        ::v-deep .el-input-group__append,
        .el-input-group__prepend {
          background-color: transparent;
          border: none;
        }
      }

      .tableBox {
        height: calc(100% - 95px);
        .docImg {
          cursor: pointer;
          width: 20px;
          height: 25px;
        }
      }

      .actBtn {
        cursor: pointer;
        width: 24px;
        height: 24px;
        margin-right: 10px;

        &:last-child {
          margin: 0;
        }
      }

      .pageBox {
        height: 45px;
        justify-content: space-between;
        align-items: center;

        .bin_fenyeqi {
          display: block !important;
          ::v-deep .el-pagination__rightwrapper {
            display: flex;
            align-items: center;
          }
        }
      }
    }

    .btn {
      width: auto;
      height: 40px;
      padding-top: 10px;
      padding-bottom: 10px;
      box-shadow: inset 0px 0px 15px 1px #02fff4;
      background-color: transparent;
      outline: none;
      border: 1px solid #02fff4;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      font-style: normal;
      text-transform: none;
      cursor: pointer;
      position: relative;
    }

    .addBtnexport {
      width: 100px;
      height: 45px;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 45px;
      font-style: normal;
      text-transform: none;
      text-indent: 44px;
      background: url("../../../assets/btn.png") center center no-repeat;
      background-size: 100% 100%;
      margin-right: 10px;
      cursor: pointer;
      position: relative;

      &::before {
        width: 18px;
        height: 18px;
        background: url("../../../assets/exporticon.png") center center
          no-repeat;
        background-size: 100% 100%;
        position: absolute;
        left: 20px;
        top: 13px;
        content: "";
      }
    }
  }

  .algorithm_dialog {
    ::v-deep .el-dialog__body {
      padding: 0;
    }
  }
}
</style>
